Node.js基礎3

14th鐵人賽

黃昱翔

2022-10-05 23:43:59

534 瀏覽

分享至

Express

接下來我們將會使用npm下載Express框架去撰寫網頁伺服器。

步驟

先找到檔案位置，然後在CMD或Unix Command輸入以下指令(要先下載Node.js)

npm init

將npm做初始化後，我們就可以透過npm指令下載express

npm install express

接下來就可以在JS裡輸入架設網頁伺服器語法

HTTP Request

在進入網頁之前，用戶端會向伺服器發送request(請求)，而伺服器亦會做出response(回復)，種類如下
1.Get Request:取得網頁的請求
2.Post Request:發送資料的請求(例如登入)
3.Put Request:更新資料的請求
4.Patch Request:更新資料的請求
5.Delete Request:刪除資料的請求

Express中接受request語法如下

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html"); //回復 HTML 網頁
});

以get request為範例，"/"代表首頁，req參數代表收到的請求、res參數代表做出的回覆，這段程式的意思為當我在網址"/"，server會回復一個html網頁。

範例

這邊演示透過Express架設網頁伺服器

先在index.html輸入以下程式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Express練習</h1>
  </body>
</html>

JS架設網頁伺服器語法如下

const express = require("express"); //取得下載好的express
const app = express(); 

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html"); //回復 HTML 網頁
});

app.get("/list/:listNumber", (req, res) => {
  let { listNumber } = req.params; //取得使用者在 :後的路徑名稱
  res.send(listNumber + " 號分頁"); //回復字串在網頁上
});

app.get("*", (req, res) => { //處理上面以外的路徑名稱
  res.status(404); //設定 status code
  res.send("Cannot find what you want");
});

app.listen(3000, () => { //Server會接收Port3000
  console.log("server is running on Port 3000");
});

接下來透過node執行JS檔
在空白網頁上的網址輸入 http://localhost:3000/ 即可顯示

輸入http://localhost:3000/list/2 在list/後輸入任意數值都行

網址輸錯會顯示找不到